<template>
  <div class="search-toolbar flex flex-wrap items-center gap-4">
    <el-input
      v-model="searchValue"
      :placeholder="placeholder"
      prefix-icon="Search"
      clearable
      @clear="$emit('search', '')"
      @input="debounceSearch"
      style="min-width: 240px"
      class="search-input"
    />
    
    <slot></slot>
    
    <div class="flex gap-2 ml-auto">
      <el-button type="primary" @click="$emit('search', searchValue)" :loading="loading" class="search-btn">
        <el-icon class="mr-1"><Search /></el-icon>查询
      </el-button>
      <el-button @click="resetSearch" class="reset-btn">
        <el-icon class="mr-1"><Refresh /></el-icon>重置
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'SearchToolbar',
  components: {
    Search,
    Refresh
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索关键词'
    },
    loading: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchValue = ref(props.value)
    
    // 监听外部value变化
    watch(() => props.value, (val) => {
      searchValue.value = val
    })
    
    // 防抖搜索
    let searchTimeout = null
    const debounceSearch = () => {
      if (searchTimeout) {
        clearTimeout(searchTimeout)
      }
      searchTimeout = setTimeout(() => {
        emit('search', searchValue.value)
      }, 500)
    }
    
    // 重置搜索
    const resetSearch = () => {
      searchValue.value = ''
      emit('search', '')
      emit('reset')
    }
    
    return {
      searchValue,
      debounceSearch,
      resetSearch
    }
  }
}
</script>

<style scoped>
.search-input {
  transition: all 0.3s;
}

.search-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-btn, .reset-btn {
  transition: all 0.3s;
}

.search-btn:hover, .reset-btn:hover {
  transform: translateY(-2px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .search-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-toolbar > * {
    margin-bottom: 8px;
    width: 100%;
  }
  
  .search-toolbar .flex {
    width: 100%;
    justify-content: space-between;
  }
}
</style> 